<template>
  <div class="bg-banner">
    <div class="campContainer">
      <div class="banner_info">
        <div class="banner_title">营地管理平台</div>
        <div class="banner_txt">欢迎来到营地管理平台，你可以在这里进行创建营地、发票管理、用户管理、权限管理、数据统计、一种全新的营地管理体验。</div>
      </div>
      <img class="banner_img" src="@/assets/images/camp/banner-img.png"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CampBanner"
  }
</script>

<style scoped lang="scss">
  .bg-banner {
    width: 100%;
    height: 230px;
    background: #4D75F3;

    > div {
      height: 100%;
      padding: 0 100px;
      display: flex;
      flex-flow: row;
      align-items: center;

      .banner_info {
        flex: 1;
        margin-right: 50px;

        .banner_title {
          height: 26px;
          line-height: 26px;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
        }

        .banner_txt {
          max-width: 630px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 28px;
          margin-top: 20px;
        }
      }

      .banner_img {
        height: 100%;
      }
    }
  }
</style>
